<template>
  <div class="flowdiv">
    <div id="flowDayChartxiping" style="width: 100%;height: 100%;"></div>
    <div id="flowDayChartsiwan" style="width: 100%;height: 100%;"></div>
    
  </div>
</template>
<script>
import echarts from "echarts";
import homeService from "../../../../services/homeService";

export default {
  mounted() {
    this.initData();
  },

  methods: {
    drawYiChangChart(chartName,
            title,
            xAxis_data,
            chart_series,
            legend_data) {
      // 基于准备好的dom，初始化echarts实例
      let flowDayChart = echarts.init(
        document.getElementById(chartName),
        "dark"
      );
      // window.onresize = flowDayChart.resize;
      window.addEventListener("resize", () => { flowDayChart.resize();});
      // 绘制图表
      let option = {
        backgroundColor:'',
        title: {
          text: title
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: legend_data
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xAxis_data
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: chart_series
      };
      flowDayChart.setOption(option);
    },

    initData() {
      let _this = this;

      //初始化
      homeService.dayChart().then(res => {
        if (res.leftDirection) {


          let title = res.leftDirection.direction;
          let xAxis_data = res.leftDirection.hour;
          let chart_series = [];
          let legend_data = [];
          res.leftDirection.carTunnelFlows.map(item => {
            legend_data.push(item.tunnel);
            chart_series.push({
              name: item.tunnel,
              type: "line",
              stack: "总量",
              areaStyle: {},
              data: item.flows
            });
          });
          _this.drawYiChangChart(
            "flowDayChartxiping",
            title,
            xAxis_data,
            chart_series,
            legend_data
          );

          title = res.rightDirection.direction;
          xAxis_data = res.rightDirection.hour;
          chart_series = [];
          legend_data = [];
          res.rightDirection.carTunnelFlows.map(item => {
            legend_data.push(item.tunnel);
            chart_series.push({
              name: item.tunnel,
              type: "line",
              stack: "总量",
              areaStyle: {},
              data: item.flows
            });
          });
          _this.drawYiChangChart(
            "flowDayChartsiwan",
            title,
            xAxis_data,
            chart_series,
            legend_data
          );
        }
      });
    }
  }
};
</script>
<style lang="scss">

.flowdiv {
  display: flex;
  flex-direction: row;
  height: 100%;
  padding-top: 20px;
}
</style>
